<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          clearable
          @change="getData()"
          placeholder="地址查询"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.agency_name"
          @keyup.enter.native="getData()"
          placeholder="机构名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['access_status.eq']"
          placeholder="准入状态"
          @change="getData()"
          clearable
          :options="enumAccessStatus"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" :loading="loading">查询</el-button>
        <el-button
          @click="newCredit()"
          v-if="orgRegionLever < 3 && !this.agencyM"
          icon="el-icon-plus"
          :loading="loading"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:agencyName="scope">
        <div v-if="scope.row.access_agency_id === clientId">
          {{ scope.row.service_agency_name }}
        </div>
        <div v-else>{{ scope.row.agency_name }}</div>
      </template>
      <template v-slot:address="scope">
        <div
          class="text-truncate"
          v-if="scope.row.access_agency_id === clientId"
          :title="scope.row.service_agency_address"
        >
          {{ scope.row.service_agency_address }}
        </div>
        <div class="text-truncate" v-else :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:contact="scope">
        <div v-if="scope.row.access_agency_id === clientId">
          {{ scope.row.service_agency_contact }}
        </div>
        <div v-else>{{ scope.row.contact }}</div>
      </template>
      <template v-slot:mobileNo="scope">
        <div v-if="scope.row.access_agency_id === clientId">
          {{ scope.row.service_agency_mobile }}
        </div>
        <div v-else>{{ scope.row.mobile_no }}</div>
      </template>
      <template v-slot:status="scope">
        <span v-if="scope.row.access_agency_id === clientId" class="badge badge-success">
          已合作
        </span>
        <span class="badge" v-else :class="`badge-${scope.row.access_style}`">
          {{ scope.row.access_label }}
        </span>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <business-view :visible.sync="infoVisible" :accessInfo="accessInfo"></business-view>

    <edit-org
      :visible.sync="editVisible"
      @success="getData(params.index)"
      orgType="2"
      :formData="creditInfo"
      :tableId="creditId"
    ></edit-org>

    <new-select-business
      :visible.sync="newVisible"
      @success="getData(params.index)"
    ></new-select-business>

    <business-approve
      :visible.sync="approveVisible"
      @success="getData()"
      :table-id="tableId"
      :formData="formData"
    ></business-approve>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { mapGetters } from 'vuex'
import { enumAccessStatusLabel, enumAccessStatus } from '@/credit/plugins/enumTown'
import BusinessView from '@/credit/views/org/business/BusinessView'

import EditOrg from '@/credit/views/org/NewOrg'
import NewSelectBusiness from '@/credit/views/org/business/NewSelectBusiness'

import BusinessApprove from '@/credit/views/org/business/BusinessApprove'
export default {
  components: {
    SelectAddress,
    BusinessView,
    EditOrg,
    NewSelectBusiness,
    BusinessApprove,
  },
  data() {
    return {
      enumAccessStatus,
      params: {
        index: 1,
        size: 15,
        'agency_type.eq': 2,
        address_code: '',
        agency_name: '',
      },
      order: {
        agency_create_time: 'desc',
      },
      loading: false,
      tableData: [],
      tableName: 'credit_agency_access_view',
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'agency_name' }, slot: 'agencyName' },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '联系人', prop: 'contact' }, slot: 'contact' },
        { attrs: { label: '联系电话', prop: 'mobile_no' }, slot: 'mobileNo' },
        { attrs: { label: '准入状态', prop: 'access_label', align: 'center' }, slot: 'status' },
        // {
        //   attrs: { label: '准入信息', align: 'center' },
        //   operations: [
        //     { content: '准入信息', icon: 'fa fa-file-text-o', event: this.handleView, ifRender: row => +row.access_status > 0 }
        //   ]
        // },
        { attrs: { label: '授信金额(万元)', prop: 'credit_amount', align: 'center' } },
        { attrs: { label: '资本金(万元)', prop: 'margin_amount', align: 'center' } },
        {
          attrs: { label: '操作', width: '120px' },
          operations: [
            {
              content: '准入审核',
              icon: 'fa fa-legal',
              event: this.handleEdit,
              ifRender: row => row.access_agency_id !== this.clientId && this.agencyM,
            },
            {
              content: '修改机构信息',
              icon: 'fa fa-edit',
              event: this.editCredit,
              ifRender: row => row.access_agency_id !== this.clientId && this.agencyM,
            },
            { content: '准入信息', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      totalCount: 0,
      addressCodePre: '',
      infoVisible: false,
      accessInfo: {},

      editVisible: false,
      creditInfo: {},
      creditId: '',

      newVisible: false,

      approveVisible: false,
      tableId: '',
      formData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user']),
    agencyM() {
      return this.user.scopeArr.includes('agencyM')
    },
    orgRegionLever() {
      return this.user.orgRegionLever
    },
  },
  created() {
    this.params['access_status.in'] = '-1,0,1,2,3'
    this.params['service_id.eq'] = this.clientId

    this.getData()
  },
  methods: {
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleView(row) {
      this.infoVisible = true
      this.accessInfo = row
    },
    dataAdapter(item) {
      item.mobile_no = item.mobile_no || ''
      const access = enumAccessStatusLabel[item.access_status] || {}
      item.access_label = access.label
      item.access_style = access.style
      return item
    },
    newCredit() {
      this.newVisible = true
    },
    editCredit(data) {
      this.editVisible = true
      this.creditInfo = data ? { ...data } : {}
      this.creditId = data ? data.credit_agency_info_id : ''
    },
    handleEdit(row) {
      this.approveVisible = true
      this.tableId = row ? row.credit_agency_access_id : ''
      this.formData = row ? { ...row } : {}
    },
  },
}
</script>
<style lang="scss" scoped></style>
